<%-- 
    Document   : account
    Created on : 5/Jun/2009, 0:42:26
    Author     : eurico
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="deti.es.ukni.cm.account.AccountBean"%>
<%@page import="deti.es.ukni.persistence.entity.*" %>
<%@page import="java.util.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

 <%
    AccountBean curAccount = (AccountBean) session.getAttribute("account");
    if ( curAccount == null )
        response.sendRedirect("./login.jsp");
    else{
 %>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="../resource/myband.css" />
        
        <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA-IxVtEF80D4xYMtKixTl9xTwM0brOpm-All5BF6PoaKBxRWWERTJYYYTq_EhpUWmZOadEtkHw-UC6Q"></script>

        <title>MyBand</title>

        <script>
            google.load("maps", "2");
            google.load("jquery","1.3.2" );

            google.setOnLoadCallback( function(){
                
                $.getJSON("../rest/account/<%= curAccount.getAccount().getUsername() %>", function(data){
                    
                    $.each( data.follow , function(i, follow){
                        
                        
                        // Get all events and sort them..
                        $.getJSON("../rest/band/id/"+follow.id+"/event", function(data){
                            if (data.length == 0) return;

                            data.sort(function(a,b){ return a.addtime < b.addtime});

                            var event   = document.createElement('div');
                            var bandname= document.createElement('h4');
                            var location= document.createElement('span');
                            var dateevent= document.createElement('span');
                            var emap    = document.createElement('div');

                            $(event).appendTo("#follow");
                            $(event).attr('class', 'event');
                            $(bandname).appendTo( $(event) );
                            $(bandname).append( follow.name );
                            $(location).appendTo( $(event) );
                            $(location).append("Description: " + data[0].location );
                            $(dateevent).appendTo( $(event) );
                            $(dateevent).append("Date: " + data[0].eventdate );

                            $(emap).appendTo($(event));
                            $(emap).attr('class', 'map');
                            $(emap).attr('lat', data[0].lat);
                            $(emap).attr('lng', data[0].lng);
                            //$(emap).css('height', '200px');
                            $(emap).height(200);

                            // Create the map
                            var map = new google.maps.Map2(emap);
                            var lat = parseFloat( data[0].lat );
                            var lng = parseFloat( data[0].lng );
                            var ll  = new google.maps.LatLng(lat, lng);
                            var mark = new google.maps.Marker(ll);

                            map.addControl( new GMapTypeControl() );
                            map.addControl( new GSmallMapControl() );
                            //map.enableGoogleBar();
                            //map.enableScrollWheelZoom();
                            map.setCenter(ll, 13);
                            mark.show();
                            map.addOverlay( mark );

                        });
                    });
                    
                });
                $("#follow").html('');
            });
        </script>

    </head>
    <body>

        <div id="header">
            <div id="logo">
                <img src="../resource/mybandlogo.png" alt="myband_logo"/>
            </div>
        </div>

        <div id="nav">
            <a href="logout.jsp">Logout</a>
            <ul>
                <li><a href="../band">Search Bands</a></li>
                <li> <a href="../band">Friends</a></li>
                <li><a href="favorite.jsp">Your favorite bands</a></li>
                <% if (curAccount.hasBand() ){ %>
                <li><a href="../band/new.jsp">My Band</a> </li>
                <% } %>
            </ul>
        </div>

        <div id="content">
            <div class="bands">
                <h2>Latest events from your favorite Bands!</h2>
                <div id="follow">
                    Loading...
                </div>
        </div>
        </div>
        
    </body>
</html>

<% } %>
